<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>计算器</title>
    </head>
    <body>
        <button onclick="alert('警告框')">弹出警告</button>
        <button onclick="confirm('你确认要删除吗？')">弹出确认框</button>
        <button onclick="prompt('请输入会员卡号：')">弹出提示输入框</button>
        <hr>

        <input type="text" placeholder="请输入数字1" id="i1"><br>
        <input type="text" placeholder="请输入数字2" id="i2"><br>
        <button onclick="calc('+')">加</button>
        <button onclick="calc('-')">减</button>
        <button onclick="calc('*')">乘</button>
        <button onclick="calc('/')">除</button>
        <h4>运算结果：<span></span></h4>

        <script>
            function calc(o){
                //获取用户在输入框中输入的值,注意input的值存在value属性里
                let n1 = document.querySelector('#i1').value;
                let n2 = document.querySelector('#i2').value;
                //输入框的值是string类型,需要转为number数字类型
                n1 = parseFloat(n1);
                n2 = parseFloat(n2);
                //通过标签名选择器找到span元素
                let spanE = document.querySelector('span');
                switch (o){
                    case '+':
                        spanE.innerHTML = n1+n2;
                        break;
                    case '-':
                        spanE.innerHTML = n1-n2;
                        break;
                    case '*':
                        spanE.innerHTML = n1*n2;
                        break;
                    case '/':
                        if (n2!=0){
                            spanE.innerHTML = n1/n2;
                            break;
                        }else {
                            alert('分母不能为0');
                            break;
                        }
                }
                //输入完清空数据
                document.getElementById('i1').value='';
                document.getElementById('i2').value='';
            }
        </script>
    </body>
</html>